<template>
	<view class="u-page">
		
		<view class="u-demo-block">
			<text class="u-demo-block__title">完善信息填写</text>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
					labelPosition="left"
					:model="model1"
					ref="form1"
				>
				姓名
					<u-form-item
						label=""
						prop="userInfo.realname"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.realname"
							border="none"
							placeholder="请输入姓名"
						></u--input>
					</u-form-item>
					身份证号码
					<u-form-item
						label=""
						prop="userInfo.idnumber"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.idnumber"
							border="none"
							placeholder="请输入身份证"
						></u--input>
					</u-form-item>
					
					联系方式
					<u-form-item
						label=""
						prop="userInfo.phonenumber"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.phonenumber"
							border="none"
							placeholder="请输入手机号"
						></u--input>
					</u-form-item>
					
					收入等级
					<u-form-item
						label=""
						prop="userInfo.incomegradeId"
						borderBottom
						@click="showincomegradeId = true; hideKeyboard()"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.incomegradeId"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择收入等级"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					
					
					
					婚姻状况
					<u-form-item
						label=""
						prop="userInfo.marriageId"
						borderBottom
						@click="showmarriageId = true; hideKeyboard()"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.marriageId"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择婚姻状况"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					
					
					子女数量
				
				<u-form-item
					label=""
					prop="userInfo.kidcountId"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="model1.userInfo.kidcountId"
						border="none"
						placeholder="请输入子女数量"
					></u--input>
				</u-form-item>
					
					教育背景
					
					<u-form-item
						label=""
						prop="userInfo.educationbackgroundId"
						borderBottom
						@click="showeducationbackgroundId = true; hideKeyboard()"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.educationbackgroundId"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择教育等级"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					住房条件
					
					<u-form-item
						label=""
						prop="userInfo.houseconditionId"
						borderBottom
						@click="showhouseconditionId = true; hideKeyboard()"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.houseconditionId"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择住房等级"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					
					
				
				邮箱
				<u-form-item
					label=""
					prop="userInfo.email"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="model1.userInfo.email"
						border="none"
						placeholder="请输入邮箱"
					></u--input>
				</u-form-item>
				
				
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
				<u-button
					type="error"
					text="重置"
					customStyle="margin-top: 10px"
					@click="reset"
				></u-button>
				<u-action-sheet
					:show="showincomegradeId"
					:actions="actionsincomegradeId"
					title="请选择收入等级"
				
					@close="showincomegradeId = false"
					@select="incomegradeIdSelect"
				>
				</u-action-sheet>
				
				<u-action-sheet
					:show="showmarriageId"
					:actions="actionsmarriageId"
					title="请选择婚姻"
				
					@close="showmarriageId = false"
					@select="marriageIdSelect"
				>
				</u-action-sheet>	
				<u-action-sheet
					:show="showeducationbackgroundId"
					:actions="actionseducationbackgroundId"
					title="请选择教育等级"
				
					@close="showeducationbackgroundId = false"
					@select="educationbackgroundIdSelect"
				>
				</u-action-sheet>
				<u-action-sheet
					:show="showhouseconditionId"
					:actions="actionshouseconditionId"
					title="请选择住房等级"
				
					@close="showhouseconditionId = false"
					@select="houseconditionIdSelect"
				>
				</u-action-sheet>
				
			
			
			</view>
		</view>
	</view>
</template>

<script>
	import token from '@/common/token/token.js';
	
	export default {
		data() {
			return {
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				model1: {
					userInfo: {
						id:token.id,
						version:'',
						bitstate:'',
						realname: '',
						idnumber:'',
						phonenumber:'',
						incomegradeId: '',
						marriageId:'',
						kidcountId:'',
						educationbackgroundId:'',
						houseconditionId:'',
						email:'',
						
					}
				},
				
				showincomegradeId: false,
				showmarriageId:false,
				showeducationbackgroundId:false,
				showhouseconditionId:false,
				birthday: Number(new Date()),
				actionsincomegradeId: [{
						name: '1',
					},
					{
						name: '2',
					},
					{
						name: '3',
					},{
						name: '4',
					},
				],
				actionsmarriageId: [{
						name: '0',
					},
					{
						name: '1',
					},
				],
				actionseducationbackgroundId:  [{
						name: '1',
					},
					{
						name: '2',
					},
					{
						name: '3',
					},{
						name: '4',
					},
				],
				actionshouseconditionId: [{
						name: '1',
					},
					{
						name: '2',
					},
					{
						name: '3',
					},{
						name: '4',
					},
				],
				
				rules: {
					'userInfo.realname': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.idnumber': [{
						type: 'string',
						required: true,
						message: '请填写身份证',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.idCard(value);
						},
						message: "身份证有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// trigger: ["change", "blur"],
					}],
					'userInfo.phonenumber': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.mobile(value);
						},
						message: "手机号有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// trigger: ["change", "blur"],
					}],
					'userInfo.email': [{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.email(value);
						},
						message: "邮箱有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// trigger: ["change", "blur"],
					}],
					'userInfo.children': [{
						type: 'string',
						required: true,
						message: '请填写子女数量',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.digits(value);
						},
						message: "子女数量有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// trigger: ["change", "blur"],
					}],
				}

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			navigateBack() {
				uni.navigateBack()
			},
			incomegradeIdSelect(e) {
				this.model1.userInfo.incomegradeId = e.name
				this.$refs.form1.validateField('userInfo.incomegradeId')
			},
			marriageIdSelect(e){
				this.model1.userInfo.marriageId = e.name
				this.$refs.form1.validateField('userInfo.marriageId')
			},
			educationbackgroundIdSelect(e){
				this.model1.userInfo.educationbackgroundId = e.name
				this.$refs.form1.validateField('userInfo.educationbackgroundId')
			},
			houseconditionIdSelect(e){
				this.model1.userInfo.houseconditionId = e.name
				this.$refs.form1.validateField('userInfo.houseconditionId')
			},
			change(e) {
				// console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
				this.$refs.form1.validateField('hotel')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			calendarClose() {
				this.showCalendar = false
				this.$refs.form1.validateField('hotel')
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.form1.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.form1.validateField('userInfo.birthday')
			},
			submit() {
					// alert();
		
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					this.$api({
						method: 'post',
						url: '/system/user/updateUserById',
						 data: this.model1.userInfo
					}).then(res => {
						uni.reLaunch({
							url:"/pages/user/user",							
						})
						
					}).catch(err => {
						console.log(err)
					});
							console.log(this.model1.userInfo);
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
				'hotel', 'code', 'userInfo.birthday']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(()=>{
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				},10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">

</style>
